@import '../storebase1';
@import '../components/header';
@import '../components/content-item';


#main-container{
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    right:0;
    //overflow: hidden;


}

.content-wrapper{
    //position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right:0;
    height: 100%;
    -webkit-backface-visibility:hidden;
    -webkit-transform-style:preserve-3d;
    overflow: hidden;
}

.content-item{
    position: absolute;
    z-index: 1;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    width: 100%;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
    -webkit-backface-visibility:hidden;
    -webkit-transform-style:preserve-3d;

}

.item{
    display: block;
    background-image: url(../images/fangtunew.ios.jpg);
    background-size: px2rem(250) px2rem(250);
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #f9f9f9;
}

.img-des-block{
    width: px2rem(382);
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: px2rem(-191);
    text-align: center;
    background: rgba(255,255,255,.7);
    padding: px2rem(15) px2rem(25);
    p{
        //line-height: px2rem(55);
        line-height: px2rem(45);
        &:first-child{
            font-size: px2rem(22);
            color: #333;
        }
        &:nth-last-child(1){
            font-size: px2rem(28);
            color: #000;
        }
    }
}

.pedia-img-des{
    margin-bottom: px2rem(76);
}

.index-img{
    display: block;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.2s linear 0s;
}

.content-item{
    position: relative;
    //overflow: hidden;
    padding-left: px2rem(67);
    padding-right: px2rem(6);
}

.line-list-wrapper{
    position: relative;
    width: 100%;
    -webkit-transform: translate3d(0,0,0) translateZ(0);

    -webkit-backface-visibility:hidden;
    -webkit-transform-style:preserve-3d;
    //padding-top: px2rem(16);
    li{
        position: relative;
        padding-right: px2rem(156);
        //padding-top: px2rem(20);
        padding-bottom: px2rem(76);
    }
    &:after{
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 1px;
        background: #bebebe;
        right: px2rem(155);
        -webkit-transform: scaleX(0.5);
        transform: scaleX(0.5);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }

    .list-content{
        padding-right: px2rem(31);
    }

    .r-times-wrapper{
        position: absolute;
        width: px2rem(156);
        height: px2rem(50);
        right: 0;
        top: 0;

        .list-time{
            position: absolute;
            width: px2rem(128);
            height: px2rem(50);
            right: 0;
            top:0;
            color: #fff;
            background: #4c4c4c;
            opacity: 0;

            em{
                position: absolute;
                top:px2rem(5);
                left: px2rem(-12);
                width: 0;
                height: 0;
                border-top: px2rem(10) solid transparent;
                border-right: px2rem(20) solid #4c4c4c;
                border-bottom: px2rem(10) solid transparent;
                z-index: 999;

            }
        }

        .data-time{
            position: absolute;
            width: px2rem(240);
            height: px2rem(50);
            left: px2rem(-56);
            top:0;
            font-size: 16px;
            background: #4c4c4c;
            -webkit-transform: scale(0.51);
            z-index: 9999;
        }
        .time-flag{
            position: absolute;
            width: px2rem(14);
            height: px2rem(14);
            line-height: px2rem(14);
            background: #ccc;
            border-radius: 50%;
            box-shadow: none;
            left: px2rem(-8);
            top: px2rem(8);
            z-index: 9999;
            em{
                position: absolute;
                width: px2rem(24);
                height: 0;
                left: px2rem(-22);
                top:px2rem(6);
                border-bottom: 1px solid #ccc;
            }
        }
    }

    .article-img{
        height: px2rem(430);
    }
    .other-img{
        height: px2rem(894);
    }
}

.active-data{
    position: fixed;
    //position: absolute;
    width: px2rem(156);
    height: px2rem(50);
    right: px2rem(6);
    //top: px2rem(16);
    top:0;
    z-index: 99999;

    .list-time{
        position: absolute;
        width: px2rem(128);
        height: px2rem(50);
        right: 0;
        top:0;
        color: #909090;
        background: #4c4c4c;
        opacity: 1;

        em{
            position: absolute;
            top:px2rem(5);
            left: px2rem(-12);
            width: 0;
            height: 0;
            border-top: px2rem(10) solid transparent;
            border-right: px2rem(20) solid #4c4c4c;
            border-bottom: px2rem(10) solid transparent;
            z-index: 999;
        }
    }

    .data-time{
        position: absolute;
        width: px2rem(240);
        height: px2rem(50);
        left: px2rem(-54);
        top:px2rem(-12);
        font-size: px2rem(40);
        background: #4c4c4c;
        -webkit-transform: scale(0.51);
        z-index: 9999;
    }
    .time-flag{
        position: absolute;
        width: px2rem(14);
        height: px2rem(14);
        line-height: px2rem(14);
        background: #eb1717;
        box-shadow: 0 0 0 px2rem(8) #ccc;
        border-radius: 50%;
        left: px2rem(-8);
        top: px2rem(8);
        z-index: 9999;
        em{
            position: absolute;
            width: px2rem(24);
            height: 0;
            left: px2rem(-22);
            top:px2rem(6);
            border-bottom: 1px solid #ccc;
        }
    }
}

//@media screen and (min-width: 750px) {
//    .active-data{
//        right: px2rem(253);
//    }
//}

.gray{
    background: gray;
}